<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>arco后台管理模板</title>
    <script src="http://blog.shilinwei.com:81/authMangeFile/resource/vue2.js"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://pvmp-minio.szsciit.com/cop-mp/highlight.min.js"></script>
    <link
      rel="stylesheet"
      href="https://pvmp-minio.szsciit.com/cop-mp/default.min.css"
    />
    <style>
      html,
      body,
      p,
      div,
      span {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      #app {
        width: 1200px;
        height: 100vh;
        margin: 0 auto;
        padding: 80px 0;
        overflow: hidden;
      }
      .el-container {
        height: 100%;
      }
      .desc {
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
        /* text-indent: 2em; */
      }
      .spaceBar {
        height: 32px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-aside width="200px">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
          >
            <el-menu-item index="1" @click="changeActive(1)">
              <i class="el-icon-menu"></i>
              <span slot="title">简介</span>
            </el-menu-item>
            <el-menu-item index="4" @click="changeActive(4)">
              <i class="el-icon-document"></i>
              <span slot="title">新项目前置工作</span>
            </el-menu-item>
            <el-menu-item index="2" @click="changeActive(2)">
              <i class="el-icon-document"></i>
              <span slot="title">快速上手</span>
            </el-menu-item>
            <el-menu-item index="3" @click="changeActive(3)">
              <i class="el-icon-setting"></i>
              <span slot="title">配置项</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <div v-if="active == 1">
            <el-card shadow="always">
              <div>
                <h3>为什么需要封装这套模板？</h3>
                <p class="desc">
                  经历了数次大量的复制粘贴后，感到效率过于低下且枯燥，且不同的人、不同的迭代，重复的bug频繁出现，不同的测试人员对于同一功能提出的不同意见无法给出官方解释，借鉴于像Avue(封装了element-ui)、antdesign
                  Pro-Table（封装了antdesign）这样的前车之鉴，决定还是基于Acro框架封装一套可通过配置即可完成增、删、改、查等操作的模板代码。
                </p>
              </div>
            </el-card>
            <div class="spaceBar"></div>
            <el-card shadow="always">
              <div>
                <h3>为什么输出物是模板而不是一个组件供他人使用？</h3>
                <p class="desc">
                  <el-descriptions
                    class="margin-top"
                    title="考虑了一下现阶段组件的弊端："
                    :column="1"
                    :size="size"
                    border
                  >
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-circle-close"></i>
                        精力
                      </template>
                      目前是利用工作空隙去逐步封装，如果是直接去维护插件，维护成本会带来很大负担
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-circle-close"></i>
                        成熟度
                      </template>
                      目前该套模板只经历过一次迭代，尚存在很多不足和缺陷，为了更快速的同步更新模板问题，故选择以模板的方式输出
                    </el-descriptions-item>
                    <el-descriptions-item>
                      <template slot="label">
                        <i class="el-icon-circle-close"></i>
                        自由度
                      </template>
                      提供模板后，使用者copy到自己的文件夹下，可对模板随意进行删减和增加，对于和常规的crud略微不同的模块也能通过微调高效完成开发。
                      <br />
                      而组件呢？碍于他的对接方式，对于个别情况的特殊需求又要求封装者封装大量的slot和特殊处理。
                    </el-descriptions-item>
                  </el-descriptions>
                </p>
              </div>
            </el-card>
          </div>
          <div v-if="active == 4">
            <el-card shadow="always">
              <div>
                <h3>index.html中的准备工作</h3>
                <p class="desc">
                  <pre> <code class="language-javascript">
                    <script src="//webapi.amap.com/loader.js"></script>
                    <script src="//a.amap.com/jsapi_demos/static/china.js"></script>
                    <script src="//webapi.amap.com/maps?v=2.0&key=c2d2e890d7f48fcd15d5656249cc3373&plugin=AMap.CitySearch,AMap.DistrictSearch,AMap.AutoComplete,AMap.MarkerCluster,AMap.Geocoder,AMap.Geolocation,AMap.PlaceSearch"></script>
                    <script src="//webapi.amap.com/ui/1.1/main.js"></script>
                  </code></pre>
                </p>
              </div>
            </el-card>
            <div class="spaceBar"></div>
          </div>
          <div v-if="active == 2">
            <p style="margin-bottom: 16px">
              故事场景：我接到了一个模板任务，需要开发一个用户管理模块，我将通过以下步骤快速完成该模块的开发:
            </p>

            <el-card shadow="always">
              <div>
                <h3>步骤一:</h3>
                <p class="desc">
                  将模板代码连同文件夹全部copy到我将要创建文件夹的目录下，并将文件夹名称改为 userManagement
                </p>
              </div>
            </el-card>
            <div class="spaceBar"></div>

            <el-card shadow="always">
              <div>
                <h3>步骤二:</h3>
                <p class="desc">
                  在api文件夹下我创建了一个 userManagement.js文件，并且里面的方法命名规范如下:
            <pre> <code class="language-javascript">
  import {
    addDataReq, // 增
    deleteDataReq, // 删
    updateDataReq, // 改
    getDetailReq, // 查
    getListReq, // 查列表
    exportDataReq, // 导出
  } from '@/api/supermarketManagement/index';
            </code></pre>
                </p>

                <p>有人会问接口名称都一样了，将来出现冲突怎么办,用如下方法对接口名称进行重新命名:</p>
            <pre> <code class="language-javascript"> import { getListReq as getListReqArea } from '@/api/areaManagement/index'; </code></pre>
              </div>
            </el-card>
            <div class="spaceBar"></div>
            <el-card shadow="always">
              <div>
                <h3>步骤三:</h3>
                <p class="desc">
                  根据接口进行配置columnData数组
                  <pre> <code class="language-javascript">  
const columnData = ref(
  columnDataTranform([
    {
      title: '序号',
      dataIndex: 'num',
      slotName: 'num',
      isSearch: false,
      isView: false,
      isAdd: false,
      // width: 80,
    },
    {
      title: '文字输入框',
      type: 'input',
      dataIndex: 'name',
      ellipsis: true,
      tooltip: true,
      isSearch: false,
      // width: 200,
    },

    {
      title: '数字输入框',
      type: 'number',
      dataIndex: 'shortName',
      ellipsis: true,
      tooltip: true,
      // width: 200,
    },
    {
      title: '地图',
      dataIndex: 'location',
      type: 'chooseAddress',
      ellipsis: true,
      tooltip: true,
      isSearch: false,
      disabled: false,
      addSpan: 24,
      // width: 200,
    },
    {
      title: '仅用于查看和table展示',
      dataIndex: 'parentName',
      ellipsis: true,
      tooltip: true,
      isSearch: false,
      isAdd: false,
      // width: 200,
    },

    {
      title: '下拉框',
      dataIndex: 'parentId',
      ellipsis: true,
      tooltip: true,
      isTable: false,
      isView: false,
      type: 'select',
      selectOptions: [],
      options: {
        label: 'name',
        value: 'id',
      },
      // width: 200,
    },
    {
      title: '操作',
      slotName: 'operate',
      fixed: 'right',
      isView: false,
      isSearch: false,
      isAdd: false,
      // width: 140,
    },
  ])
);
</code></pre>
                </p>
              </div>
            </el-card>
            <div class="spaceBar"></div>

            <el-card shadow="always">
              <div>
                <h3>步骤四:</h3>
                <p class="desc">
                  由于新增或者搜索区域的搜索框中，部分form表单是下拉框，需要请求接口拿到数据进行渲染，该部分方法的书写无要求，但是调用需要统一写在 initOtherData 方法中:
            <pre> <code class="language-javascript">

  /**
  * 把需要单独处理的数据请求写到这里，将来会在index.vue中的onMounted中进行触发
  */

  const initOtherData = () => {
    areaListHandler();
  };

            </code></pre>
                </p>
              </div>
            </el-card>
            <div class="spaceBar"></div>

            <el-card shadow="always">
              这样我就完成了包含新增弹窗、table展示、搜索区域、编辑弹窗的用户管理模块。
              <br/>
              其他的一些定制化的需求，我可以对文件进行直接修改以完整更多的细节功能
            </el-card>
          </div>
          <div v-if="active == 3">
            
            <el-card shadow="always">
              <i class="el-icon-info" style="color: rgb(230, 0, 18);"></i>
              所有的配置项都是以arcoUI官方的配置为基准，只是对于封装部分的配置项以及和arcoUI官方发生命名冲突的参数进行说明
            </el-card>



            <div class="spaceBar"></div>

            <el-card shadow="always">
            <p class="desc">
              <el-descriptions
                class="margin-top"
                title="Attributes："
                :column="1"
                :size="size"
                border
              >

              <el-descriptions-item>
                <template slot="label">
                  参数
                </template>
                参数说明
              </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    isSearch
                  </template>
                  是否在搜索区域展示，默认展示
                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    isTable
                  </template>
                  是否在表格区域展示，默认展示
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    isAdd
                  </template>
                  是否在新增区域展示，默认展示
                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    isEdit
                  </template>
                  是否在编辑区域展示，默认展示
                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    isView
                  </template>
                  是否在查看区域展示，默认展示
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    addSpan
                  </template>
                  新增和编辑框中项的宽度，默认是12
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    span
                  </template>
                  查看弹窗中占据的宽度
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    disabled
                  </template>
                  新增和编辑框中是否禁用
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    selectOptions
                  </template>
                  下拉框的数据
                </el-descriptions-item>

                <el-descriptions-item>
                  <template slot="label">
                    maxLength
                  </template>
                  文本输入的最大长度
                </el-descriptions-item>


                <el-descriptions-item>
                  <template slot="label">
                    required
                  </template>
                  是否为必填项
                </el-descriptions-item>
              </el-descriptions>
            </p>
          </el-card>





          <div class="spaceBar"></div>

          <el-card shadow="always">
          <p class="desc">
            <el-descriptions
              class="margin-top"
              title="Events："
              :column="1"
              :size="size"
              border
            >

            <el-descriptions-item>
              <template slot="label">
                方法名称
              </template>
              方法说明
            </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  setSelectOptionsByColumnData
                </template>
                将接口数据映射到 selectOptions 中，参数：Function(key,arr)
              </el-descriptions-item>

              <el-descriptions-item>
                <template slot="label">
                  initOtherData
                </template>
                所有的初始化数据相关的方法，都写在这个方法中执行，将来会在index.vue中的onMounted()回调中执行
              </el-descriptions-item>

          </p>
        </el-card>




          </div>
        </el-main>
      </el-container>
    </div>

    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
          active: 1,
          size: 'small',
        },
        methods: {
          async changeActive(val) {
            this.active = val;
            await this.$nextTick();
            document.querySelectorAll('pre code').forEach(el => {
              hljs.highlightElement(el);
            });
          },
          handleClose(val) {
            console.log(val);
          },
          handleOpen(val) {
            console.log(val);
          },
        },
      });
    </script>
  </body>
</html>
